<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .active{
            width: 100px;
            height: 100px;
            background: green;
        }

        .txt-danger{
            background: red;
        }
    </style>
</head>
<body>

<div id="app_y_1">
    基础模式：
    <div class="active"></div>
    <div class="active txt-danger"></div>
    1.v-bind模式
    <div v-bind:class="{'active':true}"></div>
    <br/>
    2.v-bind 在vue中属性控制
    <div v-bind:class="{'active': isActive}"></div>
    3.v-bind 多个样式控制
    <div v-bind:class="{'active': isActive, 'txt-danger': true}"></div>
    4.v-bind 属性值设置
    <div v-bind:class="activeClass"></div>
    <div :class="[txtDangerClass,activeClass]"></div>
    5.v-bind 对象的样式设置,表示对象不用插值表达式， 'txt-danger': true  带有横杠的，需要添加''，这是规定
    <div :class="objClass"></div>
    6.v-bind computed 对象
    <div :class="cObjClass"></div>

    内联样式设置
    <div :style="{color: activeColor, 'font-size':fontSize+'px'}">1.内联样式设置</div>
    <div :style="[baseStyle,overridingStyles]">2.内联样式设置</div>
</div>

<script>
    let v = new Vue({
        el: '#app_y_1',
        data: {
            isActive: true,
            isTxtDanger: true,

            activeClass: 'active',
            txtDangerClass: 'txt-danger',

            objClass: {
                active: true,
                'txt-danger': true
            },

            activeColor: 'green',
            fontSize: 30,

            baseStyle: {
                color: 'green',
                'font-size': '30px'
            },
            overridingStyles: {
                'font-weight': 'bold'
            }

        },
        computed: {
            cObjClass: function () {
                return {active:this.isActive,'txt-danger':this.isTxtDanger}
            }
        }
    });
</script>

</body>
</html>